<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jet-CMS | Channel</title>
    <link type="text/css" rel="stylesheet" th:href="@{/pure-min.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/main.css}" />
    <script type="text/javascript" th:src="@{/main.js}"></script>
    <script type="text/javascript" th:src="@{/vue-min.js}"></script>
    <style>
        .input {
            border: none;
            border-bottom: 1px solid #aaa;
            width: 100%;
            padding: 10px 0;
            font-size: 20px;
            color: #333;
            margin-bottom: 10px;
        }
        .input-sm {
            padding: 6px 0;
            font-size: 14px;
        }
        .input:focus {
            border-color: #0095cf;
        }
        .textarea {
            border: 1px solid #aaa;
            width: 100%;
            height: 80px;
            padding: 6px 0;
            font-size: 14px;
        }
        .legend {
            margin: 10px 0;
            border-left: 3px solid #0095cf;
            font-size: 16px;
            color: #666;
            padding-left: 10px;
        }
        .legend small {
            color: rgb(189, 163, 91);
        }
        .c-img {
            width: 98px;
        }
        .c-id {
            color: #999;
        }
        .c-title a {
            font-size: 16px;
            color: #0095cf;
        }
        .c-title a:hover {
            color: #00709c;
        }
        .c-keyword {
            color: #333;
        }
        .c-sort {
            font-size: 14px;
            padding-top: 10px;
        }
        .c-state {
            font-size: 14px;
            height: 28px;
        }
        .c-btns .pure-button {
            width: 100%;
        }
        .c-btns-item {
            padding: 2px;
        }
        .extra-field td {
            padding: 0 10px;
        }
        .extra-field input {
            margin: 0;
            padding: 6px 0;
            width: 100%;
            border: none;
        }
        .extra-field button {
            width: 100%;
        }
        .insert-extra {
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <span th:include="home/_nav"></span>
        <div class="container">
            <div class="pure-g">
                <div class="pure-u-1-4">
                    <button type="button" class="pure-button btn-blue" v-on:click="newContent()"> 创建栏目内容</button>
                </div>
                <div class="pure-u-1-2">
                    <div class="breadcrumb">
                        <ul>
                            <li v-for="item in breadcrumb" v-on:click="changeFid(item.split('^')[0])">
                                / <a href="javascript:;">{{item.split('^')[1]}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="pure-u-1-4 text-right">
                    <form class="pure-form" v-on:submit.prevent="search">
                        <input type="text" class="pure-input" v-model="keyword">
                        <button type="submit" class="pure-button">搜索</button>
                    </form>
                </div>
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th style="width:100px;">封面</th>
                        <th>标题</th>
                        <th style="width:150px;">时间</th>
                        <th style="width:100px;">排序</th>
                        <th style="width:100px;">状态</th>
                        <th style="width:200px;">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in contentList">
                        <td>
                            <a v-bind:href="'/home/resource?bid='+item.id+'&entry=content'" target="_blank">
                                <img v-if="item.cover!=''" class="c-img" v-bind:src="'/resource/image/'+item.cover+'@120'" />
                                <img v-else class="c-img" src="/images/default.jpg" />
                            </a>
                        </td>
                        <td>
                            <div class="c-id">编号：<b>{{item.id}}</b></div>
                            <div class="c-title"><a href="javascript:;" v-on:click="changeFid(item.id)">{{item.title}}</a></div>
                            <div class="c-keyword">{{item.keyword || '未设置关键词'}}</div>
                        </td>
                        <td class="c-time">
                            <div><b>创建：</b>{{dateFormat('y-m-d h:i', item.createTime*1000)}}</div>
                            <div><b>变更：</b>{{item.changeTime==0?'未变化':dateFormat('y-m-d h:i', item.changeTime*1000)}}</div>
                        </td>
                        <td><div class="c-sort">{{item.sort}}</div></td>
                        <td>
                            <select class="c-state" v-on:change="setStatus(item.id, $event)">
                                <option value="0" v-bind:selected="item.status==0">隐藏</option>
                                <option value="1" v-bind:selected="item.status==1">待发布</option>
                                <option value="2" v-bind:selected="item.status==2">公开</option>
                                <option value="3" v-bind:selected="item.status==3">置顶</option>
                            </select>
                        </td>
                        <td class="c-btns">
                            <div class="pure-g">
                                <div class="pure-u-1-2">
                                    <div class="c-btns-item"><a v-bind:href="'/home/resource?bid='+item.id+'&entry=content'" class="pure-button" target="_blank">资源</a></div>
                                </div>
                                <div class="pure-u-1-2">
                                    <div class="c-btns-item"><button v-on:click="deleteContent(item.id)" type="button" class="pure-button btn-orange">删除</button></div>
                                </div>
                                <div class="pure-u-1-2">
                                    <div class="c-btns-item"><button v-on:click="editContent(index)" type="button" class="pure-button">编辑栏目</button></div>
                                </div>
                                <div class="pure-u-1-2">
                                    <div class="c-btns-item"><a v-bind:href="'/home/content/id/'+item.id" target="_blank" class="pure-button">编辑内容</a></div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <pagination ref="pageView"></pagination>
        </div>
        <transition name="fade">
            <div class="modal" v-show="editMode">
                <div class="modal-wrap" style="width:600px;">
                    <div class="modal-title">编辑内容</div>
                    <div class="modal-content">
                        <legend class="legend">设置标题</legend>
                        <input type="text" class="input" v-model="editData.title"/>
                        <legend class="legend">设置所属栏目</legend>
                        <input type="text" class="input input-sm" v-model="editData.fid"/>
                        <div class="pure-g">
                            <div class="pure-u-1-2">
                                <legend class="legend">设置关键词 <small>(多个词请使用空格隔开)</small></legend>
                                <input type="text" class="input input-sm" v-model="editData.keyword" />
                            </div>
                            <div class="pure-u-1-6"></div>
                            <div class="pure-u-1-3">
                                <legend class="legend">设置排序</legend>
                                <input type="text" class="input input-sm" v-model="editData.sort" />
                            </div>
                        </div>
                        <legend class="legend">设置扩展字段</legend>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th style="width:30%;">字段名称</th>
                                    <th style="width:60%;">数据内容</th>
                                    <th style="width:10%;">操作</th>
                                </tr>
                            </thead>
                            <tbody class="extra-field">
                                <tr v-for="(value, key) in editData.extData">
                                    <td><input type="text" v-bind:value="key" v-on:blur="changeExtraField(true, key, value, $event)"></td>
                                    <td><input type="text" v-bind:value="value" v-on:blur="changeExtraField(false, key, value, $event)"></td>
                                    <td><button v-on:click="deleteExtraField(key)" type="button" class="pure-button btn-xs btn-orange">删除字段</button></td>
                                </tr>
                            </tbody>
                        </table>
                        <button v-on:click="insertExtraField()" type="button" class="insert-extra pure-button btn-sm btn-blue">插入新字段行</button>
                    </div>
                    <div class="modal-footer">
                        <button v-on:click="finishEdit()" type="button" class="pure-button">关闭</button>
                        <button v-on:click="updateInfo()" type="button" class="pure-button btn-green">保存</button>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</body>
<script>
    const LIMIT         = 10;
    const BC_LEVEL      = 3;
    const DEFAULT_NAME  = '新建栏目内容';
    const vue = new Vue({
        el: '#app',
        data: {
            offset: 0,
            fid: '',
            keyword: '',
            breadcrumb: [],
            editMode: false,
            editData: {
                id: '',
                fid: '',
                title: '',
                keyword: '',
                sort: 0,
                extData: {}
            },
            contentList: []
        },
        components: {
            pagination: Pagination
        },
        methods: {
            init: function(){
                this.$refs['pageView'].init(LIMIT, 5);
                this.$refs['pageView'].setCallback(function(page){
                    vue.offset = (page - 1) * LIMIT;
                    vue.loadContentList();
                });
            },
            search: function() {
                vue.offset = 0;
                vue.loadContentList();
            },
            newContent: function(){
                httpRequest(
                    '/content/add.do',
                    {fid: vue.fid, title: DEFAULT_NAME},
                    function(res){
                        if (res.code == 1) {
                            vue.offset = 0;
                            vue.loadContentList()
                        }
                    },
                    'json'
                );
            },
            editContent: function(index){
                let data = this.contentList[index];
                this.editData.id = data.id;
                this.editData.fid = data.fid;
                this.editData.title = data.title;
                this.editData.keyword = data.keyword;
                this.editData.sort = data.sort;
                this.editData.extData = JSON.parse(data.data);
                this.editMode = true;
            },
            finishEdit: function(){
                this.editMode = false;
            },
            insertExtraField: function(){
                let fieldName = 'field';
                let c = 0;
                while (this.editData.extData[fieldName]) {
                    fieldName = 'field';
                    fieldName += ++c;
                }
                this.$set(this.editData.extData, fieldName, '');
            },
            changeExtraField: function(isField, field, value, event){
                let inputVal = event.originalTarget.value;
                if (isField) {
                    if (inputVal != field) {
                        this.deleteExtraField(field);
                        this.$set(this.editData.extData, inputVal, value);
                    }
                } else if (inputVal != value) {
                    this.$set(this.editData.extData, field, inputVal);
                }
            },
            deleteExtraField: function(field) {
                this.$delete(this.editData.extData, field, undefined);
            },
            updateInfo: function(){
                httpRequest(
                    '/content/updateInfo.do',
                    {
                        id: vue.editData.id,
                        fid: vue.editData.fid,
                        title: vue.editData.title,
                        keyword: vue.editData.keyword,
                        sort: vue.editData.sort,
                        data: JSON.stringify(vue.editData.extData)
                    },
                    function(res){
                        if (res.code == 1) {
                            vue.editMode = false;
                            vue.loadContentList();
                        }
                    },
                    'json'
                );
            },
            setStatus: function(id, event) {
                httpRequest(
                    '/content/setStatus.do',
                    {id: id, status: event.originalTarget.value},
                    function(res) {}
                );
            },
            changeFid: function(fid){
                this.fid = fid;
                this.offset = 0;
                this.loadContentList();
            },
            loadContentList: function(){
                httpRequest(
                    '/content/getCount.do',
                    {fid: vue.fid, keyword: vue.keyword},
                    function(res) {
                        if (res.code == 1) {
                            vue.$refs['pageView'].setData(res.result);
                        }
                    },
                    'json'
                );
                httpRequest(
                    '/content/getSimpleList.do',
                    {offset: vue.offset, limit: LIMIT, fid: vue.fid, keyword: vue.keyword},
                    function(res){
                        if (res.code == 1) {
                            vue.contentList = res.result;
                        }
                    },
                    'json'
                );
                httpRequest(
                    '/content/getBreadcrumb.do',
                    {id: vue.fid, level: BC_LEVEL},
                    function(res){
                        if (res.code == 1) {
                            vue.breadcrumb = ['^根目录'].concat(res.result);
                        }
                    },
                    'json'
                );
            },
            deleteContent: function(id) {
                if (confirm('确定要删除该栏目吗？')) {
                    httpRequest(
                        '/content/delete.do',
                        {id: id},
                        function(res){
                            if (res.code == 1) {
                                vue.loadContentList();
                            } else {
                                alert(res.error);
                            }
                        },
                        'json'
                    );
                }
            }
        }
    });
    vue.init();
    document.onfocus = function(){
        vue.loadContentList();
    };
</script>
</html>